<template>
  <div class="detail">
    <el-row class="headline">
      <el-col :span="4">
        <span>用户【某某某】详细信息</span>
      </el-col>
      <el-col :span="1" :offset="16">
        <el-button size="small">打印</el-button>
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button size="small" @click="pevBack" :icon="ArrowLeft">返回</el-button>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <!-- <el-tab-pane label="客户资料" name="1"><Credits></Credits></el-tab-pane> -->
      <el-tab-pane label="客户资料" name="1" v-if="route.query.type == '2'"><Personal></Personal></el-tab-pane>
      <el-tab-pane label="公司概况" name="3" v-if="route.query.type == '1'"><Corporate></Corporate></el-tab-pane>
      <!-- <el-tab-pane label="征信报告" name="2"><Clients></Clients></el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script setup name="Fullt">
import { ArrowLeft } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import Clients from "@/components/Clients";
import Credits from "@/components/Credits";
import Corporate from "./corporate";
import Personal from "./personal";
const emit = defineEmits(["pevBack"]);
const router = useRouter();
const route = useRoute();
const activeName = ref("1");

const handleClick = (tab, event) => {
  console.log(activeName.value, "788787");
};
function pevBack() {
  emit("pevBack");
}
onMounted(() => {
  if (route.query.type == "1") {
    activeName.value = "3";
  }
});
</script>
<style lang="scss" scoped>
.detail {
  overflow: hidden;
}
.detail:deep(.el-step__line) {
  background: #fff;
  opacity: 0;
}
:deep(.el-step__icon.is-text) {
  border: 1px solid;
}
:deep(.el-step__icon) {
  height: 14px;
  width: 14px;
}
:deep(.el-steps) {
  background: #f2f2f2;
  margin-top: 3px;
}
:deep(.el-step.is-horizontal) {
  display: flex;
  padding-right: 5px;
}
:deep(.el-step__title) {
  line-height: 20px;
}
:deep(.el-step__main) {
  white-space: nowrap;
}
:deep(.el-step__head.is-finish) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-finish) {
  color: #333;
}
:deep(.el-step__head.is-wait) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-wait) {
  color: #333;
}
:deep(.el-step__title.is-process) {
  color: #333;
  font-weight: 400;
}
:deep(.el-step__head.is-process) {
  font-weight: none;
  color: #333;
  border-color: #333;
}
.stepActive {
  background: black;
  :deep(.el-step__title) {
    line-height: 20px;
  }
  :deep(.el-step__title.is-finish) {
    color: #fff;
  }
  :deep(.el-step__title.is-wait) {
    color: #fff;
  }
  :deep(.el-step__title.is-process) {
    color: #fff;
    font-weight: 400;
  }
}
</style>
